<!-- subpkg_consult/medicine/timeline/index.vue -->
<script lang="ts" setup>
  import { getMedicalOrderLogistics } from '@/apis/order'
  import type { ExpressData } from '@/types/order'
  import { onMounted, ref } from 'vue'
  // 条件编译
  // #ifdef APP || H5
  import AMapLoader from '@amap/amap-jsapi-loader'
  // #endif
  // 导入图标资源
  import carImg from '@/static/images/car.png'
  import startImg from '@/static/images/start.png'
  import endImg from '@/static/images/end.png'

  //  1.查询物流详情
  // 获取地址参数
  const pageParams = defineProps<{ id: string }>()
  // 当前位置
  const logisticsInfo = ref({} as ExpressData)
  // 查看物流信息
  const getLogistics = async () => {
    // 调用接口
    const res = await getMedicalOrderLogistics(pageParams.id)
    console.log(res)
    // 渲染数据
    logisticsInfo.value = res
  }

  // #ifdef APP || H5
  // 高德地图
  const initAMap = async () => {
    // 创建地图容器
    let map: any = null
    // 配置密钥
    window._AMapSecurityConfig = {
      securityJsCode: '3cc3affb26a1e029136862d3b5cabbe4',
    }
    // 配置key
    const AMap = await AMapLoader.load({
      key: 'fa6411efea09e36e6f42273fd3c2488d',
      version: '2.0',
      plugins: [],
    })
    // 使用AMap初始化地图(没有代码提示，直接copy官方文档)这里需要注意容器名为 map
    map = new AMap.Map('map', {
      // 设置地图容器id
      viewMode: '3D', // 是否为3D地图模式
      zoom: 11, // 初始化地图级别
      center: [116.397428, 39.90923], // 初始化地图中心点位置
      mapStyle: 'amap://styles/whitesmoke', // 设置地图样式 关掉其他次要颜色
    })
    // 引入物流插件，绘制物流路径
    AMap.plugin('AMap.Driving', () => {
      // 创建驾车导航实例（用于物流展示）
      const driving = new AMap.Driving({
        map: map, // 指定轨迹显示地图实例
        showTraffic: false, // 关闭交通状态
        hideMarkers: true, //关闭路线规划默认
      })
      // == 替换真实物流坐标数据 ==
      // 第一个是起始坐标，第二个是终点坐标， 第三个是路途中的经纬度坐标， 第四个规划好了的回调函数
      // 1. 使用经纬度数组中的第一个数据：起始坐标
      const startLngLat = logisticsInfo.value.logisticsInfo.shift()
      // 2. 使用经纬度数组中的最后一个数据：结束坐标
      const endLngLat = logisticsInfo.value.logisticsInfo.pop()
      // 3. 途径点坐标：logisticsInfo.value?.logisticsInfo shift和pop后剩余未途经点坐标，处理成二维数据
      const waypoints = logisticsInfo.value.logisticsInfo.map((v) => [v.longitude, v.latitude])
      // 搜索路径（起始点，终点，途经点，回调函数）
      driving.search(
        [startLngLat?.longitude, startLngLat?.latitude],
        [endLngLat?.longitude, endLngLat?.latitude],
        { waypoints: waypoints }, // 显示途经点坐标
        (status: string, result: object) => {
          // 未出错时，result即是对应的路线规划方案
          console.log(status, result)
          // 起始点
          const startMarker = new AMap.Marker({
            icon: startImg, // 设置自定义图片
            position: [startLngLat?.longitude, startLngLat?.latitude],
            anchor: 'bottom-center', // 锚点 设置基于坐标点显示的位置
          })
          map.add(startMarker) // 把标记点添加到地图中
          // 终点
          const endMarker = new AMap.Marker({
            icon: endImg, // 设置自定义图片
            position: [endLngLat?.longitude, endLngLat?.latitude], // 图片显示的坐标位置
            anchor: 'bottom-center', // 锚点 设置基于坐标点显示的位置
          })
          map.add(endMarker) // 把标记点添加到地图中
          // 当前车辆的位置
          const carMarker = new AMap.Marker({
            icon: carImg, // 自定义图片
            position: [
              logisticsInfo.value.currentLocationInfo.longitude,
              logisticsInfo.value.currentLocationInfo.latitude,
            ], // 经纬度
            anchor: 'center', //锚点 设置基于坐标点图片位置
          })
          map.add(carMarker)
          // 3s后，定位到货车，放大地图
          setTimeout(() => {
            map.setFitView([carMarker]) // 设置中心点 会根据覆盖物自动计算
            map.setZoom(10) // 设置地图缩放级别
          }, 3000)
        }
      )
    })
  }
  // #endif

  onMounted(async () => {
    // 等数据加载完成，再加载地图
    await getLogistics()
    // #ifdef APP || H5
    // 初始化高德地图
    initAMap()
    // #endif
  })
</script>

<template>
  <view class="timeline-page">
    <!-- 加载地图 -->
    <!-- #ifdef APP || H5 -->
    <view id="map" class="uni-map"></view>
    <!-- #endif -->
    <!--  end -->
    <cover-view class="timeline-meta">
      <cover-view class="status">{{ logisticsInfo.statusValue }}</cover-view>
      <cover-view class="extra">
        预计{{ logisticsInfo.estimatedTime }}送达 {{ logisticsInfo.name }} {{ logisticsInfo.awbNo }}
      </cover-view>
    </cover-view>
    <view class="timeline-detail">
      <view class="title">物流详情</view>
      <view class="timeline">
        <view class="line">
          <view class="badge text">收</view>
          <view class="content"> 收货地址：广东省广州市大华区明离路科技园880号 </view>
        </view>
        <!-- 1已发货 2已揽件 3 运输中 4 派送中 5已签收 -->
        <view v-for="item in logisticsInfo.list" :key="item.id" class="line">
          <view class="badge dot" v-if="item.status <= 3"></view>
          <view class="badge icon" v-if="item.status == 4">
            <uni-icons custom-prefix="iconfont" color="#2cb5a5" size="15" type="icon-truck" />
          </view>
          <view class="badge icon" v-if="item.status == 5">
            <uni-icons custom-prefix="iconfont" color="#2cb5a5" size="15" type="icon-checked" />
          </view>
          <view class="label">{{ item.statusValue }}</view>
          <view class="content">
            {{ item.content }}
          </view>
          <view class="time">{{ item.createTime }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
